<template>
    <div class="goods-detail">
        <!-- 属性 -->
        <ul class="attrs">
            <li v-for="(item, index) in goodsList.details?.properties" :key="item.name">
                <span class="dt">{{ item.name }}</span>
                <span class="dd">{{ item.value }}</span>
            </li>
        </ul>
        <!-- 图片 -->
        <img v-imglazy="item" v-for="(item, index) in goodsList.details?.pictures" :key="item">
    </div>
</template>

<script>
export default {
    name: 'GoodsDetail'
}
</script>

<script setup>
import { inject } from 'vue'

const goodsList = inject('goodsList')
</script>

<style scoped lang="less">
.goods-detail {
    padding: 40px;

    .attrs {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px;

        li {
            display: flex;
            margin-bottom: 10px;
            width: 100%;

            .dt {
                width: 100px;
                color: #999;
            }

            .dd {
                flex: 1;
                color: #666;
            }
        }
    }

    >img {
        width: 100%;
    }
}
</style>